<template>
	<view class="pages">
		<!-- 头部 -->
		<page_head>车辆详情</page_head>
		
		<!-- 主体 -->
		<view class="">
			<!-- 轮播图 -->
			<uni-swiper-dot :info="info" :current="current" mode="false">
				<view class="swiperBox">
					<view class="swiperBox-wrapper">
						<swiper :indicator-dots="false" :autoplay="true" :interval="2500" :duration="1000" :circular="true" class="swiperBox-swiper" @change="changeSwiper"
						 indicator-dots indicator-color="#E8E8E8" indicator-active-color="#FCCD4D">
							<swiper-item class="swiperBox-swiper__item" v-for="(item,index) in info" :key="index">
								<image class="swiperBox-image" :src="IMAGE_PREFIX +'/'+ item" mode="widthFix"></image>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</uni-swiper-dot>
			<!-- 内容 -->
			<view class="detailsbox">
				<view class="detailsbox-wrapper">
					<view class="detailsbox-title">
						<view class="title">{{ carModelDetail.modelName }}</view>
						<view class="type" v-for="(item,index) in getSlicing(carModelDetail.title)" :key="index" v-if="item != ''">{{ item }}</view>
					</view>
					<view class="detailsbox-list">
						<view class="detailsbox-item">
							<view class="detailsbox-label">能源类型</view>
							<view class="detailsbox-name">{{ carModelDetail.energyType == 1 ? '油车' : '新能源车' }}</view>
						</view>
						<view class="detailsbox-item">
							<view class="detailsbox-itembox" v-for="(item,index) in getSlicing(carModelDetail.para)" :key="index" v-if="item != ''">
								<view class="detailsbox-label" v-if="index % 2 == 0">{{ item }}</view>
								<view class="detailsbox-name" v-else>{{ item }}</view>
							</view>
						</view>
						<!-- <view class="detailsbox-item">
							<view class="detailsbox-label">百公里油耗</view>
							<view class="detailsbox-name">{{ getCaption(carModelDetail.para,1) }}</view>
						</view>
						<view class="detailsbox-item">
							<view class="detailsbox-label">辅助驾驶</view>
							<view class="detailsbox-name">{{ carModelDetail.title }}</view>
						</view>
						<view class="detailsbox-item detailsbox-item--no">
							<view class="detailsbox-label">座位数量</view>
							<view class="detailsbox-name">{{ getCaption(carModelDetail.para,0) }}</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="dfooter">
			<view class="dfooter-left">
				<view class="dfooter-price"  v-if="rentTimeType == 1"><span class="symbol">￥</span>{{ carModelDetail.dayPrice  }} <span class="zi">/天</span>
					<!-- <view class="count">原价：￥{{ carModelDetail.dayPrice }}/天起</view> -->
				</view>
				<view class="dfooter-price" v-if="rentTimeType == 2"><span class="symbol">￥</span>{{ carModelDetail.oneMonthPrice  }} <span class="zi">/{{ rentTimeType-1 }}月</span></view>
				<view class="dfooter-price" v-if="rentTimeType == 3"><span class="symbol">￥</span>{{ carModelDetail.twoMonthPrice  }} <span class="zi">/{{ rentTimeType-1 }}月</span></view>
				<view class="dfooter-price" v-if="rentTimeType == 4"><span class="symbol">￥</span>{{ carModelDetail.threeMonthPrice  }} <span class="zi">/{{ rentTimeType-1 }}月</span></view>
			</view>
			<view class="initBtn dfooter-btn" @click.native="goTo()">确认车辆</view>
		</view>
	</view>
</template>

<script>
	import page_head from '@/components/page_head.vue'
	export default {
		components:{
			page_head
		},
		data(){
			return{
				// swiper
				current: 0,
				info: [],
				IMAGE_PREFIX: this.$url.urlPath,
				carModelDetail: {},
				rentTimeType: 0,
			}
		},
		onLoad(options) {
			if(options){
				this.outletId = options.value1;
				this.selectedCity = options.value2;
				this.day = options.value3;
				this.beginTime = options.value4;
				this.oneTimeTitle = options.value5;
				this.endTime = options.value6;
				this.twoTimeTitle = options.value7;
				this.modelId = options.value8;
				this.rentTimeType = options.value9;
			}
		},
		onShow() {
			this.init();
		},
		methods: {
			init(){
				this.getCarModelDetail();
			},
			goTo(){
				console.log("去confirmOrder页面");
				let that = this;
				that.$tools.jump('/pages/confirmOrder/confirmOrder',that.outletId,that.selectedCity,that.day,that.beginTime,that.oneTimeTitle,that.endTime,that.twoTimeTitle,that.modelId,that.rentTimeType)
			},
			getCarModelDetail(){
				let that = this;
				that.$Ajax('/car/carModelDetail',{
					modelId: that.modelId
				},res => {
					if (res.code == 200) {
						that.carModelDetail = res.data;
						that.info = that.carModelDetail.picture.split(",");
						// status 1.上架 2.下架
					}
				},err =>{},'GET')
			},
			changeSwiper(e) {
				this.current = e.detail.current;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pages{
		background: #FFF6DC;
	}
	.swiperBox {
		width: 100%;
		height: 415rpx;
		position: relative;
		z-index: 8;
		margin: 0;
		padding: 0;
		@include flexCenter;
		&-wrapper {
			width: 100%;
		}
	
		&-swiper {
			width: 100%;
			height: 415rpx;
	
			&__item {
				width: 100%;
				height: 415rpx;
				overflow: hidden;
				padding: 0;
				border-radius: 0;
				@include flexCenterColumn;
	
				image {
					width: 100%;
					height: 100%;
					border-radius: 0;
				}
			}
		}
	}
	.detailsbox{
		background: linear-gradient(360deg, #FFF6DC 0%, #FFFFFF 100%);
		padding: 30rpx 40rpx;
		// height: calc(100vh - 510rpx);
		&-wrapper{
			@include flexLeftColumn;
			padding-bottom: 200rpx;
		}
		&-title{
			@include flexLeft;
			margin:  40rpx 0;
			.title{
				font-size: 44rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #000000;
			}
			.type{
				font-size: 22rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: $globalColor-fontStyle;
				background: #FCCD4D;
				border-radius: 5rpx;
				padding: 5rpx 15rpx;
				margin-left: 39rpx;
				white-space: nowrap;
			}
		}
		&-list{
			background: $globalColor-white;
			width: 100%;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
		&-item{
			@include flexBetween;
			flex-wrap: wrap;
			margin: 42rpx 30rpx 0 30rpx;
			padding: 0 0 42rpx 0;
			border-bottom: 1px solid $globalColor-border;
			&--no{
				border-bottom: none;
			}
			&:nth-last-child(1){
				border-bottom: none;
			}
		}
		&-itembox{
			width: 50%;
			padding: 0 0 42rpx 0;
			margin: 0 0 42rpx 0;
			border-bottom: 1px solid $globalColor-border;
			&:nth-last-child(1){
				border-bottom: none;
				margin: 0;padding: 0;
			}
			&:nth-last-child(2){
				border-bottom: none;
				margin: 0;padding: 0;
			}
			&:nth-child(2n){
				text-align: right;
				@include flexRight;
			}
		}
		&-label{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
		}
		&-name{
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: $globalColor-fontStyle;
			text-align: right;
			white-space: nowrap;
			@include initMoreLine(1);
			display: flow-root;
		}
	}
</style>